<template>
  <div style="">
    <div class="container">
      <div class="content-centre">
        <div class="commone-style">
          <div class="medicine-card" v-for="(medicine, index) in medicines" :key="index">
            <div style="margin-right: 10px;color: black">
              <img
                :src="medicine.imageUrl"
                @click="navigateToDetails(medicine.id)"
                alt="药品图片"
                width="150px"
                height="200px"
                :class="{ 'image-hover-effect': isHovered }"
                @mouseover="handleMouseOver"
                @mouseout="handleMouseOut"
              />
              <div style="display: flex"><el-tag size="small">药名:</el-tag><h1 style="font-size: 13px;vertical-align: middle">{{ medicine.name }}</h1></div>
              <div style="display: flex;"><el-tag size="small">别名:</el-tag><p title="别名" style="font-size: 10px;vertical-align: middle">{{medicine.alias}}</p></div>
              <div style="margin-left: 10px; float: right;">
                <el-link  @click="navigateToDetails(medicine.id)" :underline="false" style="font-size: 16px;border: none">查看详情<i class="el-icon-arrow-right"></i></el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="positionPage.currentPage"
          :page-size="positionPage.pageSize"
          layout="prev, pager, next"
          :total="positionPage.total">
        </el-pagination>
      </div>
    </div>
    <div class="footer" style="margin-top: 10%">
      <div class="">
        <div style="align-items: center">
          <h2>医药查询助手</h2>
          <p>
            医药查询助手是一款基于医药知识图谱的医药查询工具，
            它可以帮助医生快速查询药品的相关信息，
            并为医生提供药品的推荐。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import particlesConfig from '../particles/particles.json'
import request from '@/api/request'

export default {
  components: {
  },
  data () {
    return {
      showCard: false,
      isHovered: false,
      medicines: {},
      positionPage: {
        total: 7,
        currentPage: 1,
        pageSize: 4,
        queryString: ''
      },
      keywords: ''
    }
  },
  created () {
    // this.getData()
    this.searchMedicineList()
  },
  mounted () {
    // this.init()
    // this.initParticlesEffect()
  },
  methods: {
    init () {
      // window.particlesJS('particles-js', particlesConfig)
      document.body.style.overflow = 'hidden'
    },

    navigateToDetails (id) {
      // this.$router.push({ name: 'details', query: { id } })
      const frontToken = localStorage.getItem('ordinaryUserToken')
      // alert(frontToken)
      const backToken = localStorage.getItem('token')
      // alert(backToken)
      if (frontToken === null && backToken === null) {
        this.$eventBus.$emit('medicineDetails')// 触发事件 进入详情页 需要先登录 后台登陆后在查看详情页面就不需要再次登录
      } else {
        this.$router.push({ name: 'westernMedicine', params: { id } })
      }
    },
    async searchMedicineList () {
      this.positionPage.queryString = this.$route.params.category
      request.get('/wMedicine/clientMedicine/' + this.positionPage.currentPage + '/' + this.positionPage.pageSize + '?category=' + this.positionPage.queryString, {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      }).then(resp => {
        this.medicines = resp.data.rows
        this.positionPage.total = resp.data.total
        // alert(this.medicines)
      }).catch(error => {
        this.handleAxiosError(error)
      })
    },
    initParticlesEffect () {
      // window.particlesJS('particles-js', particlesConfig)
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        this.$message.error('网络请求失败，请稍后重试')
      } else {
        // 处理其他类型的错误
        this.$message.error('网络请求失败，发生错误，请稍后重试')
      }
    },
    detile () {
      console.log('详情')
      this.$router.push('/details')
    },
    handleSizeChange (pageSize) {
      this.positionPage.pageSize = pageSize
      this.searchMedicineList()
    },
    handleCurrentChange (currentPage) {
      this.positionPage.currentPage = currentPage
      this.searchMedicineList()
    },
    currentPage3 () {},
    handleMouseOver () {
      this.isHovered = true
    },
    handleMouseOut () {
      this.isHovered = false
    }
  }
}
</script>

<style scoped>
.no-underline {
  text-decoration: none;
}

.no-underline:hover {
  text-decoration: none;
}
.el-tag {
  margin: 5px 0px 5px 0px ;
}
el-link el-link--default{
  color: #151414;
}
.el-link:hover {
  color: #0ed5a6;
}
.medicine-card1 {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 40%;
  text-align: center;
  height: 80%;
  flex: none;
}
/*.autocomplete-border {*/
/*  border: none;*/
/*  box-shadow: none;*/
/*  border-radius: 0;*/
/*}*/
.autocomplete-border .elinput {
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* Customize the appearance of autocomplete suggestions */
.autocomplete-border .el-autocomplete-suggestion {
  /* Add your custom styles here */
}
@import "../../../assets/css/webpage.css";
/*.el-input {*/
/*  width: 500px;*/
/*}*/
.image-hover-effect {
  transition: transform 0.3s ease-out;
}
#particles-js{
  /*background-color: #2d5bc6;*/
  width: 100%;
  height: 500px;
  opacity: 0.7;
  background:url("../../../assets/images/zhongyao2.png");
  z-index: 1
}
.demo-form-inline .el-input{
  width: 900px;
}
.image-hover-effect:hover {
  transform: scale(1.1);
}
</style>
